<template>
	<u-navbar back-icon-color="#19264B"	title-color="#19264B" :is-fixed="true" back-text="" title="" :background="{ background: 'none' }" :border-bottom="false"></u-navbar>
	<view class="u-p-30">
		<u-gap height="30"></u-gap>
		<image style="display: block;width: 100%;" src="/static/images/tel-img-bg.png" mode="widthFix"></image>
		<!-- <image style="display: block;width: 100%;" src="/static/images/tel-img-bg.jpg" mode="widthFix"></image> -->
		<u-gap height="30"></u-gap>
		<view class="box-radius card-box u-p-40" style="background: #E6F4FF;">
			<view class="u-flex">
				<view class="u-flex-1 color-primary">
					<view class="u-font-36">
						电话客服
					</view>
					<view class="u-font-32 u-p-t-16">
						{{telNumber}}
					</view>
				</view>
				<view class="">
					<u-button @click="tel" type="primary" size="mini" shape="circle">一键拨打</u-button>
				</view>
			</view>
		</view>
	</view>
	
</template>


<script setup>
	import store from '@/store/index.js'; //需要引入store
	import {
		ref,
		reactive,
		computed,
		getCurrentInstance
	} from 'vue'
	import {
		onReady,
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import mixins from '@/common/js/mixins.js'; //需要引入store
	const { proxy } = getCurrentInstance()
	const {
		nav,
		navLogin
	} = proxy.$util;
	
	const telNumber = ref();
	const tel = () =>{
		uni.makePhoneCall({
			phoneNumber:telNumber.value
		});
	}
	
	const getData = () => {
		// uni.showLoading({
		// 	title: '加载中'
		// });
		proxy.$u.api.commonServiceTel().then(res => {
			let {
				data,
				code,
				msg
			} = res;
			if (code == 200) {
				telNumber.value = data;
			}else {
				uni.$u.toast(msg || '错误');
			}
		})
	}

	onReady(() => {
		
	})
	onLoad((d) => {
		getData()
	})
	onShow(() => {


	})
</script>
<style>
	page {
		background: linear-gradient(189deg, #D4ECFF 0%, #ffffff 30%, #ffffff 100%);
	}
</style>
<style lang="scss" scoped>
	page {
		background: linear-gradient(189deg, #D4ECFF 0%, #ffffff 30%, #ffffff 100%);
	}
</style>